window.addEventListener("load", function () {
    let wrapper = document.querySelector("#wrapper")
    let widthMax = window.innerWidth
    let heightMax = window.innerHeight
    wrapper.style.height = heightMax + "px";
    wrapper.style.width = widthMax + "px";

    /* 第一页js */
    let p1 = document.querySelector(".p1")
    let p1_percentage = document.querySelector(".loadingBar>span")
    let p1_loading = document.querySelector(".loading")
    let p1_num = 0
    let p1_mask = document.querySelector(".mask")
    let p1_btn = document.querySelector(".btn")
    let p2 = document.querySelector(".p2")
    let t1 = setInterval(function () {
        if(p1_num === 100){
            clearInterval(t1)
            p1_percentage.innerHTML = "100%"
            p1_loading.style.width = "100%"
            p1_mask.style.display = "none"
        }else{
            p1_num += 2
            p1_percentage.innerHTML = `${p1_num}%`
            p1_loading.style.width = `${p1_num}%`
        }
    },100)
    p1_btn.addEventListener("click", function () {
        p2.style.opacity = "1"
        p1.style.opacity = "0"
        zIndex(p2)
    })

    // 第二页js
    let p2_back = document.querySelector(".p2 .return")
    let p2_test = document.querySelector(".p2 .test")
    let p3 = document.querySelector(".p3")
    p2_back.addEventListener("click", function () {
        p2.style.opacity = "0"
        p1.style.opacity = "1"
        zIndex(p1)
    })
    p2_test.addEventListener("click", function () {
        p3.style.opacity = "1"
        p2.style.opacity = "0"
        zIndex(p3)
    })

    // 第三页js
    let p3_back = document.querySelector(".p3 .return")
    let p3_submit = document.querySelector(".p3 .submit")
    let p4 = document.querySelector(".p4")
    let p3_options = document.querySelectorAll(".p3 .option")
    let flags = [true,true,true,true,true,true,true,true,true,true]
    let p4_choice = document.querySelector(".p4 .choice")
    let p4_grade = document.querySelector(".p4 .grade")
    let p4_stars = document.querySelector(".stars")
    let p3_num = 0

    p3_back.addEventListener("click", function () {
        p2.style.opacity = "1"
        p3.style.opacity = "0"
        zIndex(p2)
    })
    p3_submit.addEventListener("click", function () {
        p4.style.opacity = "1"
        p3.style.opacity = "0"
        p4_stars.classList.add("p4_stars")
        star()
        if(p3_num === 0){
            p4_stars.innerHTML = ""
            for(let i = 0 ; i < 5; i++){
                let zero_star = document.createElement("div")
                zero_star.classList.add("zero_star")
                p4_stars.appendChild(zero_star)
            }
            p4_grade.innerText = "0"
        }
        zIndex(p4)
    })
    for(let i = 0 ; i < p3_options.length ; i++){
        p3_options[i].addEventListener("click", function () {
            if(flags[i] === true){
                let oDiv = document.createElement("div")
                oDiv.classList.add("p4_option")
                oDiv.innerText = p3_options[i].children[1].innerText
                oDiv.setAttribute("data-index", i)
                p4_choice.appendChild(oDiv)
                this.classList.remove("false")
                this.classList.add("true")
                p3_num += 0.5
                p4_grade.innerText = p3_num
                // console.log(Math.floor(p3_num) === p3_num);
                star()
                flags[i] = false
            }
            else{
                this.classList.remove("true")
                this.classList.add("false")
                for(let j = 0 ; j < p4_choice.children.length ; j++){
                    if(p4_choice.children[j].getAttribute("data-index") === i.toString()){
                        p4_choice.removeChild(p4_choice.children[j])
                    }
                }
                p3_num -= 0.5
                star()
                p4_grade.innerText = p3_num
                flags[i] = true
            }
        })
    }


    // 第四页js
    let p4_back = document.querySelector(".p4 .return")
    let p4_more = document.querySelector(".p4 .more")
    let p5 = document.querySelector(".p5")
    let p5_license = document.querySelector(".bc>.license")
    p4_back.addEventListener("click", function () {
        p4_stars.classList.toggle("p4_stars")
        p4_stars.innerHTML = ""
        p3.style.opacity = "1"
        p4.style.opacity = "0"
        zIndex(p3)
    })
    p4_more.addEventListener("click", function () {
        p4_stars.classList.toggle("p4_stars")
        p4_stars.innerHTML = ""
        p5.style.opacity = "1"
        p4.style.opacity = "0"
        p5.classList.toggle("page5")
        zIndex(p5)
    })

    // 第五页js
    let p5_back = document.querySelector(".p5 .return")
    let p5_index = document.querySelector(".p5 .index")
    p5_back.addEventListener("click", function () {
        p4.style.opacity = "1"
        p5.style.opacity = "0"
        p4_stars.classList.add("p4_stars")
        p5.classList.toggle("page5")
        star()
        zIndex(p4)
    })
    p5_index.addEventListener("click", function () {
        p1.style.opacity = "1"
        p5.style.opacity = "0"
        zIndex(p1)
        p5.classList.toggle("page5")
    })

    function zIndex(host) {
        for (let i = 0 ; i < wrapper.children.length ; i++){
            wrapper.children[i].style.zIndex = "1"
            host.style.zIndex = "999"
        }
    }


    function star() {
        if(Math.floor(p3_num) === p3_num){
            p4_stars.innerHTML = ""
            for(let i = 0 ; i < p3_num; i++){
                let full_star = document.createElement("div")
                full_star.classList.add("full_star")
                p4_stars.appendChild(full_star)
            }
            let zs = 5 - p3_num
            for(let i = 0 ; i < zs; i++){
                let zero_star = document.createElement("div")
                zero_star.classList.add("zero_star")
                p4_stars.appendChild(zero_star)
            }
        }
        else if(Math.floor(p3_num) !== p3_num){
            p4_stars.innerHTML = ""
            for(let i = 0 ; i < Math.floor(p3_num); i++){
                let full_star = document.createElement("div")
                full_star.classList.add("full_star")
                p4_stars.appendChild(full_star)
            }
            let half_star = document.createElement("div")
            half_star.classList.add("half_star")
            p4_stars.appendChild(half_star)
            let zs = 5 - Math.ceil(p3_num)
            for(let i = 0 ; i < zs; i++){
                let zero_star = document.createElement("div")
                zero_star.classList.add("zero_star")
                p4_stars.appendChild(zero_star)
            }
        }
    }
})
